<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Camunda Form Example</title>
    <link href="https://cdn.form.io/formiojs/formio.full.min.css" rel="stylesheet">
</head>
<body>
<div id="form-container"></div>
<script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
<script>
    // 假设这是从 Camunda Modeler 导出的 JSON 表单
    const formJson = {
        "components": [
            {
                "label": "First Name",
                "key": "firstName",
                "type": "textfield"
            },
            {
                "label": "Last Name",
                "key": "lastName",
                "type": "textfield"
            },
            {
                "label": "Email",
                "key": "email",
                "type": "email"
            }
        ]
    };

    // 创建表单实例
    const form = new Formio.Form(document.getElementById('form-container'), formJson);

    // 渲染表单
    form.render().then(() => {
        console.log('Form rendered successfully');
    }).catch((error) => {
        console.error('Error rendering form:', error);
    });

    // 提交表单
    form.on('submit', (submission) => {
        console.log('Form submitted:', submission);
    });
</script>
</body>
</html>